<template>
	<view class="market_list root-container root-page-top">
		<uv-navbar :title="title" @leftClick="leftClick"></uv-navbar>
		<view class="sticky" />
		<view class="tabs">
			<uv-drop-down
				class="lst-drop" :is-sticky="false"
				text-color="#727272" text-size="14"
				text-active-color="#CD2C25" text-active-size="14"
				ref="dropDown" sign="dropDown" :defaultValue="[0, 'sales', 'evalua']"
				:extra-icon="{name: 'arrow-down-fill', size: '14px', color: '#333'}"
				:extra-active-icon="{name: 'arrow-up-fill', size: '14px', color: '#CD2C25'}"
			>
				<uv-drop-down-item name="order" type="2" :label="orderActive.label" :value="orderActive.value" />
				<uv-drop-down-item name="sales"  type="1" label='销售量' value="sales" />
				<uv-drop-down-item name="evalua"  type="1" label='好评' value="evalua" />
			</uv-drop-down>
			<uv-drop-down-popup sign="dropDown" click-overlay-on-close :currentDropItem="order" @clickItem="clickItem" />
		</view>
		<view class="content">
			<view v-for="(e,i) in 10" :key="i">
				<itemPage :item="i" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getIconPath } from '@/util'
	import { onLoad, onPageScroll } from '@dcloudio/uni-app'
	
	import itemPage from './components/item1.vue'
	
	const dropDown = ref(null)
	const order = ref({
		label: '综合排序',
		value: 'all',
		activeIndex: 0,
		size: '14px',
		color: '#727272',
		activeColor: '#CD2C25',
		activeSize: '14px',
		child: [
			{ label: '综合排序', value: 'all' }, 
			{ label: '最新发布', value: 'new' }, 
			{ label: '低价优先', value: 'money' },
		]
	})
	const orderActive = ref({ label: '综合排序', value: 'all' })
	
	const clickItem = e => {
		orderActive.value.label = e.label
		orderActive.value.value = e.value
	};
	
	const leftClick = () => uni.navigateBack()
	
	const toRoute = (url) => uni.navigateTo({ url })
	
	onPageScroll(() => dropDown.value.init())
	
	const title = ref('')
	onLoad((option) => {
		title.value = option.title
	})
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
.market_list {}
.content {
	z-index: 1;
	padding: 0 30upx;
	position: relative;
	padding-bottom: 30upx;
}
.sticky {
	top: 0;
	z-index: 2;
	position: relative;
	padding: 0 30upx;
	position: sticky;
	background-color: #F6F4F7;
	height: calc(90upx + var(--status-bar-height));
}
.tabs {
	z-index: 3;
	padding: 0 30upx;
	position: relative;
	position: sticky;
	background-color: #F6F4F7;
	top: calc(90upx + var(--status-bar-height));
}
.lst-drop{
	::v-deep .uv-drop-down {
		border-bottom: none !important;
		justify-content: start !important;
		background-color: transparent !important;
	}
	::v-deep .uv-drop-down-item {
		padding-left: 0 !important;
	}
}
</style>